<template>
  <!-- 弹窗提示 -->
  <el-dialog
    :visible="showDialog"
    width="28%"
    :title="subjectType"
    @close="btnCancel"
  >
    <el-form :rules="rules" :model="formData" ref="roleForm">
      <el-form-item label="学科名称" prop="name" label-width="90px">
        <el-input v-model="formData.name" placeholder="请输入学科名称" />
      </el-form-item>
      <el-form-item label-width="20px">
        <el-switch
          inactive-text="是否显示"
          active-color="#13ce66"
          inactive-color="#ff4949"
          v-model="isFrontDisplay"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-row type="flex" justify="end">
        <el-col :span="12">
          <el-button type="primary" @click="btnCancel">取消</el-button>
          <el-button @click="btnOK(id)">确定</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { add, update, detail } from '@/api/hmmm/subjects'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 1
    },
    courseName: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      formData: {
        name: this.courseName,
        isFrontDisplay: 1
      },
      rules: {
        name: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      isFrontDisplay: true,
      subjectName: {}
    }
  },
  computed: {
    subjectType () {
      return this.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 获取部门详情
    async getSubjectDetail () {
      const res = await detail({ id: this.id })
      // console.log(res);
      this.formData.name = res.data.subjectName
      this.formData.isFrontDisplay = res.data.isFrontDisplay
    },
    btnCancel () {
      this.formData = {
        name: ''
      }
      this.$refs.roleForm.resetFields()
      this.$emit('update:showDialog', false)
    },
    // 确定功能

    async btnOK (id) {
      await this.$refs.roleForm.validate()
      if (id) {
        // console.log(id);
        const res = await update({
          subjectName: this.formData.name,
          isFrontDisplay: this.isFrontDisplay,
          id: id
        })
        this.$emit('updateSubject', 0)
        this.$message.success('操作成功')
      } else {
        await add({
          subjectName: this.formData.name,
          isFrontDisplay: this.isFrontDisplay
        })
        this.$emit('addSubjects')
        this.$message.success('添加成功')
      }
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>
</style>
